<template>
  <view>
    <view class="card tn-padding-sm tn-margin-sm">
      <dangshiren ref="danshiren" @isSceneChange="isSceneChange" />
    </view>

    <view class="card tn-padding-sm tn-margin-sm" v-show="xianchangrenyuanShow">
      <xianchangrenyuan ref="xianchangrenyuan"/>
    </view>

    <view class="card tn-padding-sm tn-margin-sm">
      <jingbanren ref="jingbanren"/>
    </view>

    <view class="card tn-padding-sm tn-margin-sm">
      <anjianxinxi ref="anjianxinxi"/>
    </view>

    <view class="card tn-padding-sm tn-margin-sm">
      <tanhuaren ref="tanhuaren"/>
    </view>

    <view class="card tn-padding-sm tn-margin-sm">
      <kanyanbilu ref="kanyanbilu"/>
    </view>

    <view class="card tn-padding-sm tn-margin-sm">
      <peichangfeijisuanyiju ref="peichangfeijisuanyiju"/>
    </view>

    <view v-show="isEdit" class="card tn-padding-sm tn-margin-sm">
      <yichanglupeishijian ref="yichanglupeishijian"/>
    </view>
    <view class="tn-flex tn-flex-row-center tn-padding-xl">
      <tn-button v-if="$route.query.isClosed === '0'" @click="submit" backgroundColor="tn-bg-blue" style="width: 80%" fontColor="tn-color-white">保存
      </tn-button>
    </view>
  </view>
</template>

<script>
import dangshiren from './dangshiren.vue';
import jingbanren from './jingbanren.vue';
import anjianxinxi from './anjianxinxi.vue';
import tanhuaren from './tanhuaren.vue';
import kanyanbilu from './kanyanbilu.vue';
import {getDocumentDetail} from '@/api/lupeiwenshu.js';
import {formatTimeReverse} from '@/utils/formatData.js'

import Peichangfeijisuanyiju from "./peichangfeijisuanyiju.vue";
import Yichanglupeishijian from "./yichanglupeishijian.vue";
import {formatTime} from "../../../utils/formatData";
import {addDocument, editDocument} from "../../../api/lupeiwenshu";
import {toast} from "@/utils/common";
import Xianchangrenyuan from "@/pages/roadCompensation/zonghexinxi/xianchangrenyuan.vue";
import xianchangrenyuan from "@/pages/roadCompensation/zonghexinxi/xianchangrenyuan.vue";
import {regexIdCard, validatePhone} from "@/utils/fun";
export default {
  components: {
    Xianchangrenyuan,
    Yichanglupeishijian,
    Peichangfeijisuanyiju,
    dangshiren,
    jingbanren,
    anjianxinxi,
    tanhuaren,
    kanyanbilu,
  },
  data() {
    return {
      isEdit: false,
      xianchangrenyuanShow: false,
    };
  },
  onLoad(data) {
    data?.id && this.getList(data.id)
  },
  methods: {
    getList(id) {
      this.isEdit = !!id;
      const data = {
        id,
        isCase: false,
      }
      getDocumentDetail(data).then((res) => {
        this.setForm(res.data)
      });
    },
    submit() {

      const anjianxinxiData = {
        ...this.$refs.anjianxinxi.form,
        // 案件信息 时间格式化
        happentime1: this.$refs.anjianxinxi.form.happentime1 && formatTime(this.$refs.anjianxinxi.form.happentime1),
        inquiryStart1: this.$refs.anjianxinxi.form.inquiryStart1 && formatTime(this.$refs.anjianxinxi.form.inquiryStart1),
        inquiryEnd1: this.$refs.anjianxinxi.form.inquiryEnd1 && formatTime(this.$refs.anjianxinxi.form.inquiryEnd1),
        inquestStart1: this.$refs.anjianxinxi.form.inquestStart1 && formatTime(this.$refs.anjianxinxi.form.inquestStart1),
        inquestEnd1: this.$refs.anjianxinxi.form.inquestEnd1 && formatTime(this.$refs.anjianxinxi.form.inquestEnd1),
      }

      // 格式化经办人信息
      const offValArr = this.$refs.jingbanren.form.officerIdList.map(item => item.value)
      const jingbanrenData = {
        ...this.$refs.jingbanren.form,
        officerIdList: offValArr.concat(Array(4 - offValArr.length).fill('')),
      }

      const form = {
        ...this.$refs.danshiren.form,
        ...this.$refs.xianchangrenyuan.form,
        ...jingbanrenData,
        ...anjianxinxiData,
        enquireList: this.$refs.tanhuaren.form,
        recoNote: this.$refs.kanyanbilu.form,
        ...this.$refs.peichangfeijisuanyiju.form,
        ...this.$refs.yichanglupeishijian.form,
      };

      console.log('form?.clientIdcardNum', form?.clientIdcardNum)
      // 证件号
      if (form?.clientIdcardNum) {
        if (!regexIdCard(form.clientIdcardNum))return toast("证件号格式不正确")
      }else{
        return toast("请填写证件号")
      }


      if (form?.clientAge) {
        if(!Number(form?.clientAge))return toast("年龄格式不正确")
      }

      if (form?.clientTel) {
        if(!validatePhone(form?.clientTel))return toast("电话格式不正确")
      }

      if (!jingbanrenData?.recorderIds) {
        return toast("请填写记录人")
      }
      if (!anjianxinxiData?.locat) {
        return toast("请填写案件发生地点")
      }
      if (this.$route.query.id) {
        editDocument({...form, id: this.$route.query.id}).then((res) => {
          toast(res.msg)
          setTimeout(() => {
            uni.navigateBack();
          }, 1500)
        });
      } else {
        addDocument(form).then((res) => {
          toast(res.msg)
          setTimeout(() => {
            uni.navigateBack();
          }, 1500)
        });
      }
      console.log('验证通过');
    },
    setForm(data) {
      const {
        // 当事人信息
        clientName,
        clientGender,
        clientIdcard,
        clientIdcardNum,
        clientAge,
        clientJob,
        clientTel,
        clientAddress,
        zipcode,
        clientComName,
        clientComAddr,
        isDriver,
        isOwner,
        carOwner,
        clientRelation,
        isScene,
        //   现场人员信息
        sceneName,
        sceneGender,
        sceneIdcard,
        sceneIdcardNum,
        sceneAge,
        sceneJob,
        sceneTel,
        sceneAddr,
        sceneCompany,
        sceneRelation,
        // 经办人信息
        officerList,
        recorderIds,
        //案件信息
        happentime1,
        inquiryStart1,
        inquiryEnd1,
        inquestStart1,
        inquestEnd1,
        locat,
        enquireIds,
        kNum,
        mNum,
        jituan,
        factTwo,
        carProvince,
        carNo,
        carColor,
        carType,
        // 被谈话人信息
        enquireList,
        // 勘验笔录
        recoNote,
        //赔（补）偿费计算依据
        accordTo,
        //异常路赔事件
        discussLocat,
        factThree
      } = data;
      this.xianchangrenyuanShow = !isScene

      this.$refs.danshiren.form = {
        clientName,
        clientGender: clientGender + "",
        clientIdcard,
        clientIdcardNum,
        // 后端返回年龄数据有问题（""会返0）
        clientAge:clientAge===0?'':clientAge,
        clientJob,
        clientTel,
        clientAddress,
        zipcode,
        clientComName,
        clientComAddr,
        isDriver: isDriver + "",
        isOwner: isOwner + "",
        carOwner,
        clientRelation,
        isScene: isScene + "",
      };

      this.$refs.xianchangrenyuan.form = {
        sceneName,
        sceneGender: sceneGender + "",
        sceneIdcard,
        sceneIdcardNum,
        // 后端返回年龄数据有问题（""会返0）
        sceneAge: sceneAge===0?'':sceneAge,
        sceneJob,
        sceneTel,
        sceneAddr,
        sceneCompany,
        sceneRelation,
      };

      this.$refs.jingbanren.form = {
        officerIdList: officerList.map(item => {
          return {
            value: item.id,
            label: item.name
          }
        }),
        recorderIds,
      };

      this.$refs.anjianxinxi.form = {
        happentime1: happentime1 && formatTimeReverse(happentime1),
        inquiryStart1: inquiryStart1 && formatTimeReverse(inquiryStart1),
        inquiryEnd1: inquiryEnd1 && formatTimeReverse(inquiryEnd1),
        inquestStart1: inquestStart1 && formatTimeReverse(inquestStart1),
        inquestEnd1: inquestEnd1 && formatTimeReverse(inquestEnd1),
        locat,
        enquireIds,
        kNum,
        mNum,
        jituan,
        factTwo,
        carProvince,
        carNo,
        carColor,
        carType,
      };


      const list = enquireList.map(item => {
        return {
          ...item,
          gender: item.gender + ''
        }
      })
      this.$refs.tanhuaren.form = enquireList.length ? list : [{}];

      this.$refs.kanyanbilu.form = recoNote;
      this.$refs.kanyanbilu.setList();

      this.$refs.peichangfeijisuanyiju.form = {
        accordTo
      };

      this.$refs.yichanglupeishijian.form = {
        discussLocat,
        factThree
      };
    },
    isSceneChange(e) {
      console.log('e', e);
      if (e.length > 0) {
        this.xianchangrenyuanShow = e[0].value === '0';
      }
    },
  }
};
</script>

<style lang="scss" scoped>
.card {
  background-color: #fff;
  box-shadow: 0px 4px 20px 0px rgba(0, 3, 72, 0.1);
  border-radius: 8px;
}

.pdf-con {
  margin: 50px 10% 50px 10%;
  width: 100%;
  border: 3px double #666;

  .title {
    font-size: 24px;
    font-weight: 400;
    text-align: center;
    border-bottom: 1px solid #666;
  }
}

::v-deep {
  .tn-form-item--left__content__label {
    font-weight: 700;
  }
}
</style>
